<template>
  <div class="movie-main">
    <div class="movie-category-item movie-hot">
      <div id="slider" class="mui-slider">
        <div
          id="sliderSegmentedControl"
          class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
        >
         <div class="top">
                <h3>热映</h3>
                <a href="javascript:;">更多</a>
              </div>
          <div class="mui-scroll">
           
            <a class="mui-control-item" href="#item1mobile" data-wid="tab-top-subpage-1.html">
              
              <img src="../../../images/douban_movie1.png" alt="">
              <div>
                <h5 class="movie-name">速度与激情8</h5>
                <p class="movie-commit">
                  <span class="star">⭐⭐⭐⭐⭐</span>
                  <span class="score">7.1</span>
                </p>
              </div>
            </a>
            <a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
              <img src="../../../images/douban_movie1.png" alt="">
              <div>
                <h5 class="movie-name">速度与激情8</h5>
                <p class="movie-commit">
                  <span class="star">⭐⭐⭐⭐⭐</span>
                  <span class="score">7.1</span>
                </p>
              </div>
            </a>
            <a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">
              <img src="../../../images/douban_movie1.png" alt="">
              <div>
                <h5 class="movie-name">速度与激情8</h5>
                <p class="movie-commit">
                  <span class="star">⭐⭐⭐⭐⭐</span>
                  <span class="score">7.1</span>
                </p>
              </div>
            </a>
            <a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html">
              <img src="../../../images/douban_movie1.png" alt="">
              <div>
                <h5 class="movie-name">速度与激情8</h5>
                <p class="movie-commit">
                  <span class="star">⭐⭐⭐⭐⭐</span>
                  <span class="score">7.1</span>
                </p>
              </div>
            </a>
            <a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
              <img src="../../../images/douban_movie1.png" alt="">
              <div>
                <h5 class="movie-name">速度与激情8</h5>
                <p class="movie-commit">
                  <span class="star">⭐⭐⭐⭐⭐</span>
                  <span class="score">7.1</span>
                </p>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>

    
    <h1>111111111</h1>
    <h1>111111111</h1>
    <h1>111111111</h1>
    <h1>111111111</h1>
    <h1>111111111</h1>
    <h1>111111111</h1>
    <h1>111111111</h1>
    <h1>111111111</h1>
    <h1>111111111</h1>
    <h1>111111111</h1>
    <h1>111111111</h1>
    <h1>111111111</h1>
    <h1>111111111</h1>
    <h1>111111111</h1>
    <h1>111111111</h1>
    <h1>111111111</h1>
    <h1>111111111</h1>
    <h1>111111111</h1>
    <h1>111111111</h1>
  </div>
</template>
<script>
import IScroll from "../../../lib/iScroll/iScroll_V5.2.0.js";
export default {
  data() {
    return {};
  },
  methods: {},
  mounted() {}
};
</script>

<style lang="less" scoped>
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  text-align: left;
}
p {
  margin: 0;
}
.movie-main {
  padding: 5px;
  .movie-category-item {
    .mui-segmented-control.mui-scroll-wrapper {
      height: 20rem;
      .top{
        display: flex;
        justify-content: space-between;
        align-items:center;
        h3 {
        padding: 10px 5px;
      }
      }
    }
    
    .mui-segmented-control.mui-scroll-wrapper .mui-scroll {
      // touch-action: none;
      overflow: hidden;
      height: 20rem;
      a {
        padding: 0;
        img {
          width: 9rem;
        }
      }
    }
    
    .mui-segmented-control .mui-control-item {
      
      margin: 0 5px;
      line-height: 1.7;
      h5,
      p {
        text-align: left;
        color: #000;
        font-size: 1rem;
      }
    }
  }
}
</style>